<template>
  <div>
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="content">
      <van-cell-group>
        <van-cell title="音效">
          <template #right-icon>
            <van-switch v-model="soundEffect" />
          </template>
        </van-cell>
        <van-cell title="弹幕">
          <template #right-icon>
            <van-switch v-model="barrage" @change="toggleBarrage" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useBarrageStore } from '../../store/barrageStore';

const onClickLeft = () => {
  history.back();
};

const soundEffect = ref(false);
const barrageStore = useBarrageStore();
const barrage = ref(barrageStore.barrageOn);

watch(barrage, (newValue) => {
  barrageStore.setBarrage(newValue);
});

const toggleBarrage = (newValue: boolean) => {
  barrageStore.setBarrage(newValue);
};

onMounted(() => {
  const updateInterval = window.setInterval(barrageStore.updateBarrages, 16);
  onUnmounted(() => {
    clearInterval(updateInterval);
  });
});
</script>

<style scoped>
.content {
  padding: 16px;
  width: 100%;
}

.van-cell-group {
  width: 100%;
}

.van-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
